<template>
	<view class="container">
		<uni-forms ref="form" :model="formData">
			<uni-forms-item label="文章标题" name="title">
				<uni-easyinput v-model="formData.title" placeholder="请输入文章标题" />
			</uni-forms-item>
			<uni-forms-item label="文章作者" name="author">
				<uni-easyinput v-model="formData.author" placeholder="请输入文章作者" />
			</uni-forms-item>
			<uni-forms-item label="文章图片" name="pic">
				<uni-file-picker 
					v-model="imageValue"
					:limit="9"
					title="上传图片"
					:image-styles="{width:100, height:100}"
					:sourceType="['album', 'camera']"
					fileMediatype="image"
					mode="grid"
					@select="selectFile"
					@delete="delFile"
				/>
			</uni-forms-item>
			<uni-forms-item label="文章内容" name="editor">
				<uni-easyinput v-model="formData.editor" placeholder="请输入文章内容" />
			</uni-forms-item>
			<uni-forms-item label="浏览次数" name="visit">
				<uni-easyinput v-model="formData.visit" placeholder="请输入浏览次数" />
			</uni-forms-item>
		
			<uni-forms-item label="排序" name="sort" required>
				<uni-data-select
					v-model="formData.sort"
					:localdata="[{
						text: '自动',
						value: 9999
					}, {
						text: '第一',
						value: 200 
					}]"
					placeholder="请选择"
				/>
			</uni-forms-item>


			<uni-forms-item label="标签" name="checkbox" required>
				<uni-data-checkbox style="margin-top:5;" 
				 v-model="formData.checkbox" 
				 mode="button" 
				 multiple
				 :localdata="[{
					text: '选项1',
					value: 1
				}, {
					text: '选项2', 
					value: 2
				}, {
					text: '选项3',
					value: 3
				}]" />
			</uni-forms-item>
			
			<uni-forms-item label="显示" name="status" required >
				<uni-data-checkbox
				mode="tag" 
				 v-model="formData.status" 
				:localdata="[{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				}]" />
			</uni-forms-item>

			<view class="button-group">
				<button  type="primary" @click="submitForm">提交</button>
				<button  type="default" @click="resetForm">重置</button>
			</view>

		</uni-forms>
	</view>
</template>

<script>
import { ref,reactive } from 'vue'
import { postDemoFrom,setuploadFile } from '@/apis/api'
import uinFun from '@/uilt/uinFun'
import { getUserInfo } from '@/uilt/wx'

export default {
	components:{
		// nutButton:Button
	},
	setup(){	
	
		const form=ref(null)
		// 定义表单数据对象，包含姓名、手机号和邮箱字段
		const formData = reactive({
			title: '',
			author: '',
			pic: [],
			editor: '',
			visit: '',
			sort: 1,
			checkbox: [],
			status: 1,
		})

		
		// 上传图片本地数组
		const imageValue=reactive([])
		// 上传图片
		const selectFile=(tempFilePaths)=>{
			// 如果选择了多张图片，循环处理每一张
			tempFilePaths.tempFilePaths.forEach((filePath) => {
				// 定义formData
				const from={model:'demo'}
				setuploadFile(filePath,from)
				.then(res => {
					if(res.code != 200) {
						uinFun.setErrorToast(res.data);
						return;
					}
					imageValue.push({
						url:'http://vouchers.karineni.cn' + res.data.getUrl,
						name:res.data.getName,
						extname:res.data.getExtension
					}
					)
				})
				.catch(err => {
					uinFun.setNetErrorToast(err);
				});
			});
		
		}
		// 删除图片
		const delFile=(e)=>{
			// 删除数组中的指定元素
			imageValue.pic.splice(e.index, 1);
		}
		// 提交表单方法
		const submitForm = () => {
		
			if (imageValue.length > 0) {
				formData.pic = JSON.stringify(imageValue)
			}
			formData.checkbox= formData.checkbox.join(',')
			postDemoFrom(formData).then(res => {
				// (1)判断是否请求成功
				if (res.code !== 200) {
					uinFun.setModal('错误提示', res.data)
					return false
				}
				// (2)提示提交成功
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				
				// (3)重置表单
				resetForm()
			}).catch(err => {
				console.log(err)
				uinFun.setModal('错误提示', err)
			})
		}

		// 重置表单方法
		const resetForm = () => {
			Object.assign(formData, {
				title: '',
				author: '',
				pic: [],
				editor: '',
				visit: '', 
				sort: 9999,
				url: '',
				status: 1,
				checkbox: [] // 别忘了也重置 checkbox
			})
			imageValue.pic = []
			// 调用表单组件的重置方法
			// formData.value = {}
		}

		// 返回组件需要的数据和方法
		return {
			form,
			formData,
			submitForm,
			resetForm,
			selectFile,
			delFile,
			imageValue
		}
	},

	onLoad(option) {
		uinFun.setBarTitle('添加文章')
		
	
		getUserInfo(
		   function  success(userInfo) {
		         console.log('用户信息:', userInfo);
		     },
			function error(err) {
		         console.error('获取用户信息失败:', err);
		     }
		 )
	}
}
</script>

<style lang="scss">
// @import '@/uni.scss';
@import '@/uni_modules/uni-scss/variables.scss';
@import '@/common/uni.scss';

//@import "@/node_modules/nutui-uniapp/styles/index.scss";

.container {
	padding: 20px;
}
.button-group {
	margin-top: 30px;
	display: flex;
	justify-content: space-around;
}
.button-group button {
	width: 40%;
}
</style>

